<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <div class="cms-btn-group">
                        <el-button type="primary" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                        <el-button type="danger" icon="fa fa-trash" @click="multidel()" size="small"> 删除</el-button>
                    </div>
                    <div class="cms-search-group">
                        <div class="cms-search-item">
                            <el-input  size="medium" v-model="params.kwd" placeholder="请输入图片HASH值" class="input-with-select">
                                <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </div>
                    <el-table ref="multipleHandle"
                              v-loading="loading"
                              element-loading-text="努力加载中..."
                              element-loading-spinner="el-icon-loading"
                              @selection-change="handleSelectionChange"
                              tooltip-effect="dark" :data="listData.data"  border>
                        <el-table-column align="center" type="selection" width="50"></el-table-column>
                        <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                        <el-table-column align="center" prop="path" label="图片" width="120">
                            <template slot-scope="scope">
                                <el-popover
                                        placement="top"
                                        trigger="click">
                                    <img :src="scope.row.domain+scope.row.path" />
                                    <el-button slot="reference" style="border: none;height: 55px;padding: 0">
                                        <img title="点击查看原图" alt="点击查看原图" :src="scope.row.domain+scope.row.path" style="height: 50px;width: 80px;"/>
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="hash" label="HASH值" width="350"></el-table-column>
                        <el-table-column prop="size" label="大小" width="150"></el-table-column>
                        <el-table-column prop="type" label="类型" width="150"></el-table-column>
                        <el-table-column prop="created_at" label="创建时间"></el-table-column>
                    </el-table>
                    <pagination :pageData="listData" :params="params" @list="list"/>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {ResourceList,ResourceDestroy} from '@/utils/request';
    import Pagination from '@/components/pagination';
    export default {
        components: {Pagination},
        data() {
            return {
                listData: [],//列表数据
                multipleSelection:[],//多选项
                params: {page:1,kwd:''},
            }
        },
        activated(){
            this.list();
            this.multipleSelection = [];
        },
        computed: {
            ...mapGetters(['loading']),
        },
        methods: {
            // 多选删除
            multidel(){
                if(this.multipleSelection.length == 0){
                    this.$message.error('请至少选择一项你要删除的项');return false;
                }
                this.destroy(this.multipleSelection);
            },
            //删除
            destroy(id){
                this.$confirm('确定要删除选中的图片信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'cms-message-box',
                    type: 'warning'
                }).then(() => {
                    ResourceDestroy({id: id}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.list();
                        }
                    });
                }).catch(() => {});
            },
            // 筛选
            search(){
                this.params.page = 1;
                this.list();
            },
            // 列表
            list(){
                this.$store.dispatch('setLoading', true);
                ResourceList({params: this.params}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            handleSelectionChange(val) {
                let select = [];
                if(val.length > 0){
                    val.filter((item)=>{
                        if(select.indexOf(item.id) === -1){
                            select.push(item.id)
                        }
                    });
                    this.multipleSelection = select;
                }else{
                    this.multipleSelection = [];
                }
            }
        }
    }
</script>
